<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MI store</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 1200px;
            margin: 50px auto 0px;
        }

        .phone {
            height: 30px;
        }

        .title {
            float: left;
            color: #333333;
            font-size: 22px;
        }

        .more {
            float: right;
            color: #424242;
        }

        .more:hover {
            color: #ff6700;
        }

        .left {
            float: left;
            margin-top: 10px;
        }

        .phone_item {
            display: block;
            float: left;
            width: 234px;
            height: 280px;
            background-color: #FFFFFF;
            margin: 10px 0 0 10px;
        }

        .phone_img {
            text-align: center;
            margin: 10px 0;
        }

        .des {
            color: #b0b0b0;
            font-size: 13px;
        }

        .price {
            color: #ff6700;
            font-size: 16px;

        }
    </style>
</head>

<body>
  
    <div id="app"></div>
    <template id="root">
        <div class="box">
            <div class="phone">
                <div class="title">小米手机</div>
                <div class="more">
                    <a>查看更多</a>
                </div>
            </div>
            <div class="left">
                <img src="images/ad1.png" height="570">
            </div>
            <div class="right">
                <li class="phone_item" v-for="phone in phoneList" :key="phone.id">
                    <div class="phone_img">
                        <img :src="phone.img" width="160">
                    </div>
                    <div align="center"><span class="name">{{phone.title}}<br></span>
                        <span class="des">{{phone.des}}<br></span>
                        <span class="price">{{phone.price}}</span>
                    </div>
                </li>
            </div>
    </template>
</body>
<script>
    const app = Vue.createApp({
        template: "#root",
        data() {
            return {
                phoneList: [
                    { id: "100081", img: "images/99.png",title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "3299元起" },
                    { id: "100082", img: "images/phone2.png", title: "Xiaomi 12 Pro", des: "全新骁龙8｜2K AMOLED屏幕", price: "4699元起" },
                    { id: "100083", img: "images/phone3.png", title: "Xiaomi 12", des: "全新骁龙8｜5000万主摄", price: "3699元起" },
                    { id: "100084", img: "images/phone4.png", title: "Xiaomi 12X", des: "骁龙870｜5000万主摄", price: "2999元起" },
                    { id: "100085", img: "images/phone5.png", title: "Xiaomi 11 青春活力版", des: "轻薄5G，内外皆出彩", price: "1899元起" },
                    { id: "100086", img: "images/phone6.png", title: "Redmi Note 11 Pro系列", des: "三星AMOLED高刷屏", price: "1799元起" },
                    { id: "100087", img: "images/phone7.png", title: "Redmi Note 11 5G", des: "5000mAh大电量", price: "1199元起" },
                    { id: "100088", img: "images/phone8.png", title: "Redmi Note 11 4G", des: "5000mAh大电量", price: "969元起" },
                ]
            }
        }
    })
    app.mount("#app")
</script>

</html>